<template>
	<view>
		<view class="flex justify-between align-center padding">
			<view class="">
				您好
				<view class="text-xl">
					{{uinfo?.username}}
				</view>
			</view>
			<text class="iconfont icon-tongzhi text-xxl text-gray"></text>
		</view>
		<view class="padding">
			<custom-input icon='iconfont icon-sousuo_2' v-model="keyword" holder='请输入账号'></custom-input>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" class="banner padding" next-margin="30px">
			<swiper-item>
				<image src="/src/static/1.png" mode="aspectFill" class="padding-right"></image>
			</swiper-item>
			<swiper-item>
				<image src="/src/static/2.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="flex flex-wrap category">
			<view class="item text-center margin-tb" v-for="(item,index) in cateList">
				<image :src="'../../static/icon'+index+'.png'" mode="heightFix"></image>
				<view class="">{{item}}</view>
			</view>
		</view>
		<button class="cu-btn bg-brown" @click="handelTest">测试</button>
		<view class="padding-left padding-right flex justify-between">
			热门岗位
			<text class="text-orange text-sm">查看更多</text>
		</view>
		<scroll-view scroll-x>
			<view class="padding flex hot-job">
				<company-job small v-for="item in hotjob" :key="item.objectId" :data="item"/>
			</view>
		</scroll-view>
		
		<view class="padding-left padding-right flex justify-between">
			最新岗位
			<text class="text-orange text-sm">查看更多</text>
		</view>
		<view class="padding">
			<company-job v-for="item in list" :key="item.objectId"
			 :data="item"
			 @click="handelJob(item.objectId)"
			/>
			<custom-empty></custom-empty>
		</view>
	</view>
</template>

<script setup lang="ts">

import { computed, ref, watch } from 'vue';
import type{ Ref } from 'vue';
import {http} from '../../utils/http'
import type {CompanyType} from '../../model/company'
import type {JobType} from '../../model/job'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import {useStore} from 'vuex'
const handelTest = ()=>{
	uni.navigateTo({
		url:'/pages/welcome/welcome'
	})
}
// 分类列表
const cateList:String[] = [
	'设计',
	'开发', 
	'运维', 
	'测试', 
	'运营', 
	'行政', 
	'数据', 
	'更多'
]

//横向列表渲染
const hotjob:Ref<Array<JobType>> = ref([])
//长列表渲染
const list:Ref<Array<JobType>> = ref([])
http.get('/classes/Job').then((res)=>{
	console.log('首页岗位数据',res);
	list.value = res.data.results,
	hotjob.value = res.data.results.filter(()=>{
		return (Math.random()>0.5)
	})
})
// 触底分页
let page = 1
onReachBottom(()=>{
	console.log('到底了');
	let skip = page * 10
	http.get('/classes/Company',{
		params:{limit:10,skip}
	}).then((res)=>{
		page++
		let results = res.data.results
		if(results.length!=0){
			list.value = [
				...list.value,//原数据
				...results//新数据
			]
		}
		else{
			uni.showToast({
				title:'没有更多数据',
				icon:'none'
			})
		}
	})
})
//下拉刷新
onPullDownRefresh(()=>{
	console.log('下拉刷新');
	let skip = Math.floor(Math.random()*15 + 5)
	http.get('classes/Job',{
		params:{
			limit:6,
			skip
		}
	}).then((res)=>{
		uni.stopPullDownRefresh()//主动关闭刷新动画
		hotjob.value = res.data.results
	})
})

//搜索功能
const keyword = ref<string>('')
watch(keyword,()=>{
	console.log('首页岗位页面搜索',keyword);
	page = 1
	http.get('/classes/Job',{
			params:
			{
				where:{
				$or: [
				  { companyName: { $regex: keyword.value,$options:"i" } }, // 公司名称模糊匹配
				  { position: { $regex: keyword.value,$options:"i"} }      // 岗位字段模糊匹配
				]
				// 'companyName':keyword.value,//精准匹配
				// 'companyName':{"$regex":keyword.value}//模糊匹配、正则匹配
				}
			},
		}).then((res)=>{
		console.log('搜索数据',res);
		list.value = res.data.results
	})
})
// 状态机
const store = useStore()
const uinfo = computed(()=>store.state.user.uinfo)
//跳转方位
const handelJob = (id:string)=>{
	uni.navigateTo({
		url:`/pages/job/job?id=${id}`
	})
}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.banner{
	height: 350upx;
	image{
		width: 100%;
		height: 100%;
	}
}
.category{
	.item{
		width: 25%;
	}
	image{
		height: 80upx;
	}
}
</style>
